﻿@{
    ViewBag.Title = "用户管理";
}
@using SQLiteCoreDB.Models;
<main style="padding:20px;">
    <h2>用户管理</h2>
    <table class="layui-hide" id="ID-table-demo-editmodes"></table>
</main>

@if (LoginMode.admin)
{

    if (LoginMode.LV == "1")
    {
        <script type="text/html" id="TPL-dropdpwn-demo">
            <button class="layui-btn layui-btn-primary dropdpwn-demo" data-field="role">
                <span>{{role(d.role) || '未授权用户' }}</span>

            </button>
        </script>
        <script type="text/html" id="TPL-dropdpwn-demo2">
            <button class="layui-btn layui-btn-primary dropdpwn-demo" data-field="LV">
                <span>{{LV(d.LV) || '未授权用户' }}</span>

            </button>
        </script>
    }
    else if (LoginMode.LV != "1" && (Model as List<Login>).First().username == LoginMode.username)
    {
        <script type="text/html" id="TPL-dropdpwn-demo">
            <span>{{role(d.role) || '未授权用户' }}</span>
        </script>
        <script type="text/html" id="TPL-dropdpwn-demo2">
            <span>{{LV(d.LV) || '未授权用户' }}</span>
        </script>
    }
    else
    {
        <script type="text/html" id="TPL-dropdpwn-demo">
            <span>{{role(d.role) || '未授权用户' }}</span>
        </script>
        <script type="text/html" id="TPL-dropdpwn-demo2">
            <button class="layui-btn layui-btn-primary dropdpwn-demo" data-field="LV">
                <span>{{LV(d.LV) || '未授权用户' }}</span>

            </button>
        </script>
    }

}
else

{
    <script type="text/html" id="TPL-dropdpwn-demo">
        <span>{{role(d.role) || '未授权用户' }}</span>
    </script>
    <script type="text/html" id="TPL-dropdpwn-demo2">
        <span>{{LV(d.LV) || '未授权用户' }}</span>
    </script>
}

<script>
    function LV(cs) {
        lsit = {
            1: {
                title: 'LV 1'
            },
            2: {
                title: 'LV 2'
            }
        }
        return lsit[cs]?.title || null;
    }
    function role(cs) {
        lsit = {
            "user": {
                title: '用户'
            },
            "admin": {
                title: '管理员'
            }
        }
        return lsit[cs]?.title || null;
    }



    layui.use(function () {
        var $ = layui.$;
        var table = layui.table;
        var dropdown = layui.dropdown;


        // 渲染
        table.render({
            elem: '#ID-table-demo-editmodes',
            data: @Html.Raw(Json.Serialize(Model)),
            page: true,
            css: [ // 设置单元格样式
                // 取消默认的溢出隐藏，并设置适当高度
                '.layui-table-cell{height: 50px; line-height: 40px;}',
                '.layui-table-cell .layui-colorpicker{width: 38px; height: 38px;}',
                '.layui-table-cell select{height: 36px; padding: 0 5px;}'
            ].join(''),
            cols: [
                [

                    { field: 'username', title: 'ID', width: 80, sort: true },
                    { field: 'username', title: '用户名', edit: 'text' },
                    { field: 'password', title: '密码', edit: 'text' },
                    { field: 'role', with: 80, title: '类型', align: 'center', templet: '#TPL-dropdpwn-demo' },
                    { field: 'LV', with: 80, title: '等级', align: 'center', templet: '#TPL-dropdpwn-demo2' }
                ]
            ],
            done: function (res, curr, count) {
                var options = this;

                // 获取当前行数据
                table.getRowData = function (tableId, elem) {
                    var index = $(elem).closest('tr').data('index');
                    return table.cache[tableId][index] || {};
                };
                // dropdown 方式的下拉选择 - 角色
                dropdown.render({
                    elem: '.dropdpwn-demo[data-field="role"]',

                    data: [{
                        title: '管理员',
                        id: 'admin'
                    }, {
                        title: '用户',
                        id: 'user'
                    }],
                    click: async function (obj) {
                        var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

                        this.elem.find('span').html(obj.title);
                        // 更新数据中对应的字段
                        data.role = obj.id;

                        let response = await axios.post("/Home/PutUser", data);
                        if (response != null) {
                            if (response) {
                                layer.msg(response.data.Msg);
                            } else {
                                layer.msg(response.data.Msg);
                            }
                        }
                    }
                });
                // dropdown 方式的下拉选择 - 等级
                dropdown.render({
                    elem: '.dropdpwn-demo[data-field="LV"]',

                    data: [{
                        title: "LV 1",
                        id: 1
                    }, {
                        title: "LV 2",
                        id: 2
                    }],
                    click: async function (obj) {
                        var data = table.getRowData(options.id, this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)

                        this.elem.find('span').html(obj.title);
                        // 更新数据中对应的字段
                        data.LV = obj.id;
                        let response = await axios.post("/Home/PutUser", data);
                        if (response != null) {
                            if (response) {
                                layer.msg(response.data.Msg);
                            } else {
                                layer.msg(response.data.Msg);
                            }
                        }

                    }
                });



                // 单元格普通编辑事件
                table.on('edit(ID-table-demo-editmodes)', async function (obj) {
                    var value = obj.value // 得到修改后的值
                    var data = obj.data // 得到所在行所有键值
                    var field = obj.field; // 得到字段

                    // 更新数据中对应的字段
                    var update = {};
                    update[field] = value;
                    obj.update(update);
                    let response = await axios.post("/Home/PutUser", data);
                    if (response != null) {
                        if (response) {
                            layer.msg(response.data.Msg);
                        } else {
                            layer.msg(response.data.Msg);
                        }
                    }

                    // 显示 - 仅用于演示

                });

                // 更多编辑方式……
            }
        });
    });
</script>
